<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">

    <script src="http://localhost:8088/jquery.min.js"></script>

    <title>注册界面</title>
	<style> 
		body{ text-align:center} 
		.div{ margin:0 auto; width:400px; height:150px; border:10px solid #00FF00} 
			/* css注释：为了观察效果设置宽度 边框 高度等样式 */ 
	</style> 
</head>

<body>
<!--  用户注册form表单 -->
<div class="div">
    邮箱： <input id="mail" type="text"  required="" autofocus="">

    <br>
    密码： <input id="password" type="password"  required="">
    <br>
	确认密码： <input id="passwordConfirm" type="password"  required="">
    <br>
	验证码： <input id="code">
	<button id="getCode">获取验证码</button>


    <br>
    <button id="register" type="submit">注册</button>
    <br>
</div>

<script type="text/javascript">
    var isClick = true;
    $("#getCode").on("click",function(){



        if(isClick) {
            alert("事件触发");
            isClick = false;
            //事件
            var mail = $("#mail").val();
            $.ajax({
                type:"GET",
                url:"http://localhost:8088/mail/sendVerificationCode/"+mail,
                // data:JSON.stringify(data),
                contentType:'application/json',
                dataType:"json",
                success:function () {
                    alert("验证码发送成功，请前往邮箱查看！");
                    // window.location.reload();
                },

                error: function (xhr, textStatus, errorThrown) {
                    /*错误信息处理*/
                    alert("验证码发送失败，请检查邮箱是否正确填写！");
                    // alert("状态码："+xhr.status);
                    // alert("状态:"+xhr.readyState);//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
                    // alert("错误信息:"+xhr.statusText );
                    // alert("返回响应信息："+xhr.responseText );//这里是详细的信息
                    // alert("请求状态："+textStatus);
                    // alert(errorThrown);
                    // alert("请求失败");


                }
            });
            //事件结束


            console.log($(this).attr("data-val"));
            //定时器
            setTimeout(function() {
                isClick = true;
            }, 60000);//60秒内不能重复点击
        }
    });



    //给注册按钮添加响应事件
    $("#register").on("click",function() {

        var mail = $("#mail").val();
        var password = $("#password").val();
        var passwordConfirm = $("#passwordConfirm").val();
        var code = $("#code").val();
        if (mail==""){
            alert("请输入邮箱！")
        }else if (password==""){
            alert("请输入密码！")
        }else if (passwordConfirm==""){
            alert("请确认密码！")
        }else if (code==""){
            alert("请输入验证码！")
        }



        $.ajax({
            type:"GET",
            url:"http://localhost:8088/user/isRegistered/" + mail,
            // data:JSON.stringify(data),
            contentType:'text',
            dataType:"text",
            success:function () {

                register(mail,password,code);
                // window.location.reload();
            },

            error: function (xhr, textStatus, errorThrown) {
                /*错误信息处理*/
                alert("该邮箱已经注册过了，禁止重复注册！");

            }
        });




    });



    function register(mail,password,code){
        $.ajax({
            type:"GET",
            url:"http://localhost:8088/user/register/"+mail+"/"+password+"/"+code,
            // data:JSON.stringify(data),
            contentType:'text',
            dataType:"text",
            success:function (data) {
                // alert("success"+data);
                // alert(JSON.stringify(data));
                // window.location.reload();

                alert("登录成功");
                // 设置localStorage

                window.localStorage.setItem('email',data);
                // 将localStorage传递到哪个页面
                location.href = 'http://localhost:8088/welcome.html';

            },

            error: function (data) {
                /*错误信息处理*/
                alert("error"+data.contentType);


            }
        });

    }

</script>
</body>
</html>